<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常见字体属性_字体粗细</title>
</head>
<style>
    div {
        font-size: 100px;
    }

    .one {
        font-weight: lighter; /*lighter:轻便字体*/
    }

    .two {
        font-weight: normal; /*normal:正常*/
    }

    .three {
        font-weight: bold; /*bold:粗的,明显的*/
    }

    .four {
        font-weight: bolder; /*微软雅黑默认最粗为bold,因此在微软雅黑的字体下与bold效果一样*/
    }

    .five {
        font-weight: 700;
        /**
        也可以使用数字表示粗细程度
        数值在100~1000且无单位,数值越大,字体越粗
        100~300等同于lighter,400~500等同于normal,600以上等同于bold
         */
    }
</style>
<body>
<div class="one">前端1</div>
<div class="two">前端2</div>
<div class="three">前端3</div>
<div class="four">前端4</div>
<div class="five">前端5</div>
</body>
</html>